<template>
    <div class="home">
        <div class="dashboard">
            <div class="left">
                <Statistic :outputValue="outputValue" :employeeTotalValue="employeeTotalValue"
                    :interfaceAccessTotalValue="interfaceAccessTotalValue"
                    :regularEmployeeTotalValue="regularEmployeeTotalValue" :toBeConfirmedValue="toBeConfirmedValue"
                    :toBeDismissedValue="toBeDismissedValue" :toBeEmployedValue="toBeEmployedValue" />
                <Quick />
                <Report :homeData="homeData" :declarationTotalValue="declarationTotalValue"
                    :declaredTotalValue="declaredTotalValue" :declaringTotalValue="declaringTotalValue"
                    :toDeclareTotalValue="toDeclareTotalValue" />
                <Reportwo :homeData="homeData" :declarationTotalValue="declarationTotalValue"
                    :declaredTotalValue="declaredTotalValue" :declaringTotalValue="declaringTotalValue"
                    :toDeclareTotalValue="toDeclareTotalValue" />
            </div>
            <div class="rights">
                <div>
                    <div
                        style="background-color: white;padding: 15px;width: calc(100% - 30px);margin-right: 10px;margin-bottom: 10px;">
                        <div class="title">帮助链接</div>
                        <div class="contents">
                            <div>入门指南</div>
                            <div>在线帮助手册</div>
                            <div>联系技术支持</div>
                            <div style="margin-bottom: 40px;">添加链接</div>
                        </div>
                    </div>
                    <div
                        style="width: 50%;background-color: white;width: calc(100% - 30px);margin-right: 10px;margin-top: 10px;padding: 15px;margin-bottom: 10px">
                        <div>通知公告</div>
                        <div>
                            <div v-for="(item, index) in notice" :key="index"
                                style="margin-top: 10px;border-bottom: 1px solid gainsboro;padding-bottom: 15px">
                                <div style="display: flex;align-items: center;">
                                    <img :src="item.icon" alt="" style="width: 28px;">
                                    <span style="font-size: 14px;">{{ item.notice }}</span>
                                </div>
                                <div style="font-size: 14px;margin-left: 28px;margin-top: 10px;color: #999;">{{
                                    item.createTime }}</div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 50%;background-color: white;width: 100%;margin-right: 10px;">
                        <el-calendar v-model="value" />
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watchEffect } from 'vue'
import Quick from '@/components/Quick.vue';
import Statistic from '@/components/Statistic.vue';
import { gethomeData, getMessage } from '@/api/home'
import { useTransition } from '@vueuse/core'
import { useRouter, useRoute } from 'vue-router'
import Reportwo from '@/components/Reportwo.vue'
const value = ref(new Date())
import Report from '@/components/Report.vue'
const router = useRouter()
const route = useRoute()
let employeeTotal = ref(0)
let interfaceAccessTotal = ref(0)
let regularEmployeeTotal = ref(0)
let toBeConfirmed = ref(0)
let toBeDismissed = ref(0)
let toBeEmployed = ref(0)
//社保申报
let declarationTotal = ref(0)
let declaredTotal = ref(0)
let declaringTotal = ref(0)
let toDeclareTotal = ref(0)
const source = ref(0)
let homeData: any = ref([])
let notice: any = ref([])
getMessage().then(res => {
    notice.value = res.data.data
})
watchEffect(() => {
    if (route.path == '/index') {
        gethomeData().then(res => {
            homeData.value = res.data.data
            source.value = res.data.data.contractSignTotal
            employeeTotal.value = res.data.data.employeeTotal
            interfaceAccessTotal.value = res.data.data.interfaceAccessTotal
            regularEmployeeTotal.value = res.data.data.regularEmployeeTotal
            toBeConfirmed.value = res.data.data.toBeConfirmed
            toBeDismissed.value = res.data.data.toBeDismissed
            toBeEmployed.value = res.data.data.toBeEmployed
            declarationTotal.value = res.data.data.socialInsurance.declarationTotal
            declaredTotal.value = res.data.data.socialInsurance.declaredTotal
            declaringTotal.value = res.data.data.socialInsurance.declaringTotal
            toDeclareTotal.value = res.data.data.socialInsurance.toDeclareTotal
        })
    }
})

const render = () => {
    source.value = 0
    gethomeData().then(res => {
        homeData.value = res.data.data
        source.value = res.data.data.contractSignTotal
        employeeTotal.value = res.data.data.employeeTotal
        interfaceAccessTotal.value = res.data.data.interfaceAccessTotal
        regularEmployeeTotal.value = res.data.data.regularEmployeeTotal
        toBeConfirmed.value = res.data.data.toBeConfirmed
        toBeDismissed.value = res.data.data.toBeDismissed
        toBeEmployed.value = res.data.data.toBeEmployed
        declarationTotal.value = res.data.data.socialInsurance.declarationTotal
        declaredTotal.value = res.data.data.socialInsurance.declaredTotal
        declaringTotal.value = res.data.data.socialInsurance.declaringTotal
        toDeclareTotal.value = res.data.data.socialInsurance.toDeclareTotal
    })
}
render()

onMounted(() => {
})

const outputValue = useTransition(source, {
    duration: 500,
})
const employeeTotalValue = useTransition(employeeTotal, {
    duration: 500,
})
const interfaceAccessTotalValue = useTransition(interfaceAccessTotal, {
    duration: 500,
})
const regularEmployeeTotalValue = useTransition(regularEmployeeTotal, {
    duration: 500,
})
const toBeConfirmedValue = useTransition(toBeConfirmed, {
    duration: 500,
})
const toBeDismissedValue = useTransition(toBeDismissed, {
    duration: 500,
})
const toBeEmployedValue = useTransition(toBeEmployed, {
    duration: 500,
})
const declarationTotalValue = useTransition(declarationTotal, {
    duration: 500,
})
const declaredTotalValue = useTransition(declaredTotal, {
    duration: 500,
})
const declaringTotalValue = useTransition(declaringTotal, {
    duration: 500,
})
const toDeclareTotalValue = useTransition(toDeclareTotal, {
    duration: 500,
})
</script>

<style>
@import '../assets/home.css'
</style>